Cours CSS – 10 Octobre 2025

Menu et positionnement des éléments

On revoit le menu et comment positionner les éléments avec CSS. Exemple :

header nav ul {
    list-style-type: none;
    padding-left: 0;
}

➡️ Supprime les puces et l’espace par défaut des listes.

Polices et mise en majuscule

• Limiter le nombre de polices à 2 par site maximum.
• Appliquer la police via le sélecteur body.
• Pour le texte en majuscule : laisser le code source en minuscule et utiliser CSS pour afficher en majuscule.
• Justification du texte : pas une bonne pratique, mais peut être utilisée pour améliorer l’apparence.

Images et attribut alt

• L’attribut alt s’affiche si l’image ne se charge pas.
• Si l’image est décorative, laisser alt vide. Si l’image contient des informations importantes, les inclure dans alt.
• Si l’image est dans le même dossier que l’index, utiliser un chemin relatif.
• Format recommandé : webp pour optimisation.
• Ne pas agrandir ou déformer les images avec width et height ; mieux vaut redimensionner l’image avant le CSS.
• En contexte professionnel : le backend ou le graphiste se charge du redimensionnement.

Positionnement avec float

• Propriétés : float: left | right | none; puis margin pour ajuster.
• L’image flotte devant le paragraphe mais pas devant le texte.
• Pour éviter que le contenu remonte à cause du float, utiliser :

.clear {
    clear: both;
}

• Float fonctionne toujours avec clear. On peut aussi utiliser le pseudo-élément ::after pour ce rôle.
💡 Explication détaillée :
Le pseudo-élément ::after permet de créer un élément virtuel qui "clear" les flottants sans ajouter de div supplémentaire dans le HTML. Exemple :
.container::after {
    content: "";
    display: table;
    clear: both;
}
- content: "" → crée un contenu vide.
- display: table → permet au pseudo-élément de générer une boîte qui englobe les floats.
- clear: both → annule les flottants à gauche et à droite.
Cette méthode garde le code HTML propre et est très utilisée dans les mises en page modernes.
• Exemple pour éléments côte à côte :

.float {
    width: 50%;
    float: left;
    padding: 0 10px;
    box-sizing: border-box;
}

• Le box-sizing: border-box inclut contenu, padding et border, évitant d’augmenter la largeur totale au-delà de 50%.
• Pour float sur images, les images doivent avoir la même taille.

Responsive et media queries

Le contenu responsive s’adapte à la taille de l’écran (smartphone → grand écran).

• Avant le responsive, il fallait développer plusieurs versions d’un site et rediriger selon le device.
• Media queries : définir des règles CSS selon la taille de l’écran.

@media screen {
    /* Règles CSS selon la taille */
}

• Approche mobile first : premières règles pour les petits écrans, puis ajustements progressifs avec les media queries.
• On définit les tailles par paliers successifs.

Exercice pratique

TP : créer un site one-page avec 2 colonnes responsive :

• Sur grand écran : 2 colonnes ou galerie photo 4 images côte à côte.
• Sur petit écran (smartphone) : une seule colonne ou 1 image par ligne.
• Utiliser un élément CSS qui se modifie selon la taille pour voir l’effet du responsive.